.vc-colorpicker {
  padding: 12px !important;
  width: 223px !important;
  background-color: #37383c !important;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2) !important;
  .vc-chrome-colorPicker,
  .vc-chrome-colorPicker-body {
    background-color: #37383c !important;
  }

  .chrome-color-wrap {
    @apply w-6 h-6 !important;
  }
  .chrome-sliders {
    .small-slider {
      margin-bottom: 4px;
    }
  }
  .vc-colorpicker--container {
    padding: 0px !important;
  }
}
.color-picker__wrapper {
  @apply w-full h-full flex flex-col relative;
  & > div:not(.custom-bar),
  .vc-color-wrap,
  .current-color {
    @apply w-full h-6 flex flex-col bg-transparent !important;
    background-image: none !important;
  }

  .vc-color-wrap {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .color-picker-current-color,
  .color-picker-current-hex,
  .color-picker-current-alpha {
    position: relative;
    height: 24px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    &::before,
    &::after {
      color: #9e9e9e;
    }
  }

  .color-picker-current-color {
    width: 62px;
  }
  .color-picker-current-hex {
    flex: 1;
    background: #26272a;
    color: #fff;
    padding-left: 12px;
    &::before {
      content: '#';
    }
  }
  .color-picker-current-alpha {
    background: #26272a;
    color: #fff;
    padding-left: 12px;
    width: 54px;
    text-align: center;
    &::after {
      content: '%';
    }
  }
}
.custom-bar__text {
  & > * {
    font-size: 10px;
    @apply px-0 bg-transparent justify-center text-white !important;
    zoom: 0.85;
    &::before,
    &::after {
      display: none;
    }
  }
}
.vc-hue-slider__bar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-image: -webkit-linear-gradient(
    left,
    red 0%,
    yellow 16.66%,
    lime 33.33%,
    aqua 50%,
    blue 66.66%,
    fuchsia 83.33%,
    red 100%
  ) !important;
}

.vc-chrome-colorPicker-body .chrome-controls {
  flex-direction: row-reverse;
  column-gap: 16px;
}

.vc-current-color {
  width: 0 !important;
  overflow: hidden;
  display: none !important;
}
.chrome-sliders {
  margin-left: 0 !important;
}
.vc-display {
  justify-content: space-between;
  height: 20px !important;
  .vc-color-input {
    width: 68px;
    flex: none !important;
    position: relative;
    margin-left: 10px;
    input {
      color: #dfdfdf !important;
      background-color: #2e2e2e !important;
      font-size: 10px !important;
    }

    &::before {
      position: absolute;
      content: '#';
      left: -10px;
      top: 50%;
      color: #9e9e9e !important;
      transform: translateY(-50%);
    }

    &::after {
      content: '';
      flex: 1;
    }
  }
  .vc-alpha-input {
    color: #dfdfdf !important;
    background-color: #2e2e2e !important;
    font-size: 10px !important;
  }
}

.vc-alpha-inputy {
  margin-left: auto;
}
